<!DOCTYPE html>
<html>
<head>
    <title>Alcohol Tester Circuit and Graph</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="850" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Draw Figure 甲 (Circuit Diagram) ---
        function drawCircuit() {
            ctx.save();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 1.5;
            ctx.font = '16px Arial';

            // Resistors and labels
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            // R_t (Alcohol Gas Sensor)
            ctx.strokeRect(150, 90, 80, 20);
            ctx.fillText('R', 185, 88);
            ctx.font = '12px Arial';
            ctx.fillText('t', 193, 90);
            ctx.font = '18px "SimSun", "Songti SC"';
            ctx.fillText('酒精气体', 190, 130);
            ctx.fillText('传感器', 190, 150);

            // R_0
            ctx.font = '16px Arial';
            ctx.strokeRect(250, 90, 80, 20);
            ctx.fillText('R', 285, 88);
            ctx.font = '12px Arial';
            ctx.fillText('0', 293, 90);

            // Wires
            ctx.beginPath();
            // Top wire
            ctx.moveTo(100, 100);
            ctx.lineTo(150, 100);
            ctx.moveTo(230, 100);
            ctx.lineTo(250, 100);
            ctx.moveTo(330, 100);
            ctx.lineTo(350, 100);

            // Left vertical wire
            ctx.moveTo(100, 100);
            ctx.lineTo(100, 280);

            // Right vertical wire
            ctx.moveTo(350, 100);
            ctx.lineTo(350, 350);

            // Bottom wire
            ctx.moveTo(350, 350);
            ctx.lineTo(150, 350);
            ctx.moveTo(100, 350);
            ctx.lineTo(100, 320);
            ctx.stroke();

            // Battery
            ctx.beginPath();
            ctx.moveTo(100, 280);
            ctx.lineTo(100, 320);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(85, 280);
            ctx.lineTo(115, 280);
            ctx.stroke();
            ctx.beginPath();
            ctx.lineWidth = 2.5;
            ctx.moveTo(90, 300);
            ctx.lineTo(110, 300);
            ctx.stroke();
            ctx.lineWidth = 1.5;


            // Switch S
            ctx.beginPath();
            ctx.arc(100, 350, 3, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(150, 350, 3, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(100, 350);
            ctx.lineTo(135, 330);
            ctx.stroke();
            ctx.font = '16px Arial';
            ctx.fillText('S', 165, 355);

            // Voltmeter V
            const v_x = 280, v_y = 200, v_r = 25;
            ctx.beginPath();
            ctx.arc(v_x, v_y, v_r, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.font = '22px Arial';
            ctx.fillText('V', v_x, v_y + 8);

            // Wires to Voltmeter
            ctx.beginPath();
            ctx.moveTo(230, 100);
            ctx.lineTo(230, v_y);
            ctx.lineTo(v_x - v_r, v_y);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(330, 100);
            ctx.lineTo(330, v_y);
            ctx.lineTo(v_x + v_r, v_y);
            ctx.stroke();

            // Junction dots
            ctx.beginPath();
            ctx.arc(230, 100, 3, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(330, 100, 3, 0, 2 * Math.PI);
            ctx.fill();

            // Label "甲"
            ctx.font = '20px "SimSun", "Songti SC"';
            ctx.fillText('甲', 225, 400);

            ctx.restore();
        }

        // --- Draw Figure 乙 (Graph) ---
        function drawGraph() {
            ctx.save();
            const originX = 450;
            const originY = 380;
            const xAxisLength = 370;
            const yAxisLength = 330;
            const xUnit = 300; // pixels per 1.0 mg/mL
            const yUnit = 30;   // pixels per 1 Ohm

            // Draw axes
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 1;
            ctx.font = '14px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // Y-axis
            ctx.beginPath();
            ctx.moveTo(originX, originY);
            ctx.lineTo(originX, originY - yAxisLength);
            ctx.lineTo(originX - 5, originY - yAxisLength + 10);
            ctx.moveTo(originX, originY - yAxisLength);
            ctx.lineTo(originX + 5, originY - yAxisLength + 10);
            ctx.stroke();
            ctx.textAlign = 'left';
            ctx.fillText('R/Ω', originX + 10, originY - yAxisLength);

            // X-axis
            ctx.beginPath();
            ctx.moveTo(originX, originY);
            ctx.lineTo(originX + xAxisLength, originY);
            ctx.lineTo(originX + xAxisLength - 10, originY - 5);
            ctx.moveTo(originX + xAxisLength, originY);
            ctx.lineTo(originX + xAxisLength - 10, originY + 5);
            ctx.stroke();
            ctx.font = '16px "SimSun", "Songti SC"';
            ctx.fillText('酒精气体浓度/(mg/mL)', originX + xAxisLength - 50, originY + 25);


            // Ticks and labels
            ctx.font = '14px Arial';
            ctx.textAlign = 'right';
            // Y-axis ticks
            for (let i = 1; i <= 9; i++) {
                ctx.beginPath();
                ctx.moveTo(originX, originY - i * yUnit);
                ctx.lineTo(originX - 5, originY - i * yUnit);
                ctx.stroke();
                ctx.fillText(i, originX - 10, originY - i * yUnit);
            }

            // X-axis ticks
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            for (let i = 0; i <= 10; i++) {
                let val = i / 10;
                let xPos = originX + val * xUnit;
                ctx.beginPath();
                ctx.moveTo(xPos, originY);
                ctx.lineTo(xPos, originY + 5);
                ctx.stroke();
                if (i > 0 || i==0) { // Label all ticks from 0 to 1.0
                    ctx.fillText(val.toFixed(1), xPos, originY + 8);
                }
            }
             ctx.fillText("0", originX, originY + 8);

            // Draw the curve R vs concentration
            ctx.beginPath();
            ctx.lineWidth = 2;
            const p = (conc) => originX + conc * xUnit;
            const r = (res) => originY - res * yUnit;
            ctx.moveTo(p(0), r(6));
            ctx.bezierCurveTo(p(0.05), r(5), p(0.1), r(4.2), p(0.2), r(3));
            ctx.bezierCurveTo(p(0.3), r(2), p(0.5), r(1.4), p(0.9), r(0.9));
            ctx.stroke();


            // Draw dashed lines for specific points
            ctx.beginPath();
            ctx.setLineDash([4, 3]);
            ctx.lineWidth = 1;
            const points = [
                { conc: 0.1, res: 4 },
                { conc: 0.2, res: 3 },
                { conc: 0.3, res: 2 },
                { conc: 0.8, res: 1 }
            ];

            points.forEach(point => {
                const x = p(point.conc);
                const y = r(point.res);
                ctx.moveTo(x, originY);
                ctx.lineTo(x, y);
                ctx.moveTo(x, y);
                ctx.lineTo(originX, y);
            });
            ctx.stroke();

            // Reset line dash
            ctx.setLineDash([]);
            
            // Label "乙"
            ctx.font = '20px "SimSun", "Songti SC"';
            ctx.fillText('乙', 630, 420);

            ctx.restore();
        }

        // --- Main Drawing Function ---
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawCircuit();
            drawGraph();
        }

        draw();

    </script>
</body>
</html>